<template>
  <div id="zonghechart2">
    <div ref="chart"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
    };
  },
  mounted() {
    // this.initLineColor();
    this.myChart = this.$echarts.init(this.$refs.chart);
    this.getData();
  },
  methods: {
    initLineColor() {
      const arr = [
        ["rgba(119, 168, 145, 1)", "rgba(176, 210, 194, 1)"],
        ["rgba(245, 132, 178, 1)", "rgba(248, 163, 143, 1)"],
        ["rgba(80, 164, 164, 1)", "rgba(98, 187, 193, 1)"],
        ["rgba(164, 138, 214, 1)", "rgba(123, 167, 225, 1)"],
        ["rgba(106, 157, 201, 1)", "rgba(88, 103, 133, 1)"],
        ["rgba(13, 195, 147, 1)", "rgba(28, 218, 162, 1)"],
        ["rgba(234, 212, 86, 1)", "rgba(230, 148, 51, 1)"],
        ["rgba(75, 136, 254, 1)", "rgba(46, 190, 239, 1)"],
        ["rgba(242, 70, 123, 1)", "rgba(248, 124, 159, 1)"],
        ["rgba(90, 85, 160, 1)", "rgba(145, 137, 225, 1)"],
      ];

      const list = [];
      arr.forEach((item) => {
        list.push(
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item[0] }, //柱图高亮渐变色
            { offset: 1, color: item[1] }, //柱图高亮渐变色
          ])
        );
      });

      this.lineList = list;
    },
    initChartRadar(xAxis, series) {
      // const chartDom = this.$refs.chart;
      // let myChart = this.$echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: 0,
          // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };

      this.myChart.setOption(option, true);
    },
    getData() {
      this.myChart.showLoading();
      const url = "/tes/graduation/statistic";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          this.data = res.discount;
          res.discount.series.forEach((item, index) => {
            item.type = "line";
            // if (index == 0) {
            //   item.markLine = {
            //     data: [
            //       {
            //         yAxis: this.data.achieve,
            //         label: {
            //           position: "end",
            //           formatter: "年份",
            //           // formatter: "达成值{a}{c}",
            //         },
            //       },
            //     ],
            //   };
            // }
          });
          let xAxis = this.data.xaxis;
          let series = this.data.series;
          // series.find((item) => item.name == "创新能力").data = [0, 16, 27];
          this.initChartRadar(xAxis, series);
        })
        .finally(() => {
          this.myChart.hideLoading();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghechart2 {
  > div {
    width: 100%;
    height: 360px;
  }
}
</style>